<template>
    <basic-layout title="设置" :showAddBtn="false" style="background: #F4F7FA;">

        <van-cell-group :border="false">
            <hUpload v-model="query.fileCode" />
            <van-cell title="姓名" is-link :value="query.name" />
            <van-cell title="单位" is-link :value="query.corpName" />
            <van-cell title="部门" is-link :value="query.deptName" />
            <van-cell title="固定电话" is-link :value="query.tel" />
            <van-cell title="手机号码" is-link :value="$infoHiding.handlePhone(query.mobile)" @click="showPhone = true" />
            <van-cell title="员工编号" is-link :value="query.empNo" />
            <van-cell title="邮箱" is-link :value="$infoHiding.handleEmail(query.email)" @click="showEmail = true" />
            <van-cell title="身份证号码" is-link :value="$infoHiding.handleIdCard(query.idCard)" @click="showIdNo = true" />
            <van-cell center title="免密支付">
                <template #right-icon>
                    <van-switch v-model="checked" size="24" @input="onInput" />
                    <!-- @change="isSwitch" -->
                </template>
            </van-cell>
            <van-cell title="安全支付密码" is-link @click="isHandle" />
            <van-cell title="所属房间设置" is-link @click="handleClick('/myRoom')" />
            <!-- <van-cell title="支付订单" is-link @click="$refs.payment.isProof()" /> -->
        </van-cell-group>
        <van-cell class="lastCell" title="关于" is-link @click="handleClick('/setUp/about')" />
        <!-- 手机号弹窗 -->
        <van-dialog class="showBox" v-model="showPhone" title="修改手机号" show-cancel-button confirm-button-text="保存"
            @confirm="onConfirm" :before-close="onBeforeClose">
            <van-field type="tel" v-model="query.mobile" maxlength="11" :clearable="true" />
        </van-dialog>
        <!-- 邮箱弹窗 -->
        <van-dialog class="showBox" v-model="showEmail" title="修改邮箱" show-cancel-button confirm-button-text="保存"
            @confirm="emailConfirm" :before-close="onBeforeClose">
            <van-field type="tel" v-model="query.email" :clearable="true" />
        </van-dialog>
        <!-- 身份证号弹窗 -->
        <van-dialog class="showBox" v-model="showIdNo" title="修改身份证号码" show-cancel-button confirm-button-text="保存"
            @confirm="idNoConfirm" :before-close="onBeforeClose">
            <van-field v-model="query.idCard" type="tel" maxlength="18" :clearable="true" />
        </van-dialog>

        <!-- 订单弹出层 -->
        <order ref="payment" :money="'24.68'" />
    </basic-layout>
</template>

<script>
    import { viewUserInfo, modifyUserInfo } from "@/api/platframe/mainFrame/mine";
    import { queryPersonPayment, getEditFree } from "@/api/platframe/mainFrame/pay";

    export default {
        props: {},
        components: {
            order: () => import("@/components/confirmOrder"),
            hUpload: () => import("./components/headUpload.vue"),
        },
        data() {
            return {
                phoneNum: "", //手机号
                email: "", // 电子邮箱
                userIdNo: "",
                showPhone: false, // 手机号弹窗
                showEmail: false, // 邮箱弹窗
                showIdNo: false, // 身份证弹窗
                isClose: true, // 是否关闭弹窗
                query: {},
                isPhone: "",
                isIdCard: "",
                isTel: false, // 设置过密码
                checked: false, // 是否免密
            };
        },
        computed: {
            userID() {
                return JSON.parse(sessionStorage.getItem("userInfo")).user;
                //  || "53E33C3A2D0B4E98917487B92E2586D6";
            },
        },
        watch: {},
        methods: {
            async getInfo() {
                // 获取个人信息
                let obj = { staffId: this.userID };

                let res = await viewUserInfo(obj);
                if (res.code === 1000 && res.data) {
                    this.query = res.data;
                    this.isPhone = res.data.mobile;
                    this.isIdCard = res.data.idCard;
                }
                // 免密支付是否设置
                let res1 = await queryPersonPayment(obj);
                if (res1.code === 1000) {
                    this.isTel = res1.data.count === 0; // 没有设置过密码
                    this.checked = res1.data.payment_free === "1"; // 免密支付
                }
            },

            // 点击进入其他页面
            handleClick(path) {
                if (!path) return;
                this.$router.push({ path });
            },

            // 免密操作
            onInput(checked) {
                if (this.isTel) {
                    this.checked = false;
                    this.$Notify({
                        type: "warning",
                        message: "请先设置支付密码！",
                    });
                } else {
                    this.isSwitch(checked);
                }
            },
            async isSwitch(e) {
                let boo = e ? "1" : "2";
                let obj = [boo, this.userID];
                await getEditFree(obj);
            },
            // 进入支付密码
            isHandle() {
                if (this.checked) {
                    this.$Dialog
                        .alert({
                            message:
                                "当前已经免密支付，请先取消免密支付再来试一试！",
                            theme: "round-button",
                        })
                        .then(() => {
                            // on close
                        });
                } else {
                    this.$router.push({ path: "/pay/cipher" });
                }
            },

            // 手机号保存
            onConfirm() {
                if (!this.query.mobile) {
                    this.$Notify({ type: "warning", message: "请输入手机号！" });
                    return (this.isClose = false);
                }
                if (!/^1[34578]\d{9}$/.test(this.query.mobile)) {
                    this.$Notify({
                        type: "warning",
                        message: "手机号格式不正确！",
                    });
                    return (this.isClose = false);
                }

                if (this.query.mobile === this.isPhone) {
                    this.$Notify({ type: "warning", message: "手机号重复！" });
                    return (this.isClose = false);
                } else {
                    return (this.isClose = true);
                }
            },
            // 邮箱保存
            emailConfirm() {
                if (!this.query.email) {
                    this.$Notify({ type: "warning", message: "请输入邮箱！" });
                    return (this.isClose = false);
                } else if (
                    !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(
                        this.query.email
                    )
                ) {
                    this.$Notify({ type: "warning", message: "邮箱格式不正确！" });
                    return (this.isClose = false);
                } else {
                    return (this.isClose = true);
                }
            },
            // 身份证保存
            idNoConfirm() {
                if (!this.query.idCard) {
                    this.$Notify({
                        type: "warning",
                        message: "请输入身份证号码！",
                    });
                    return (this.isClose = false);
                }
                if (!/^[1-9]\d{13,16}[a-zA-Z0-9]{1}$/.test(this.query.idCard)) {
                    this.$Notify({
                        type: "warning",
                        message: "身份证号码不正确！",
                    });
                    return (this.isClose = false);
                }
                if (this.query.idCard === this.isIdCard) {
                    this.$Notify({ type: "warning", message: "身份证号码重复！" });
                    return (this.isClose = false);
                } else {
                    return (this.isClose = true);
                }
            },
            // 在弹窗关闭前进行特定操作
            onBeforeClose(action, done) {
                if (action === "confirm") {
                    if (this.isClose) {
                        modifyUserInfo(this.query).then((res) => {
                            if (res.code === 1000) {
                                console.log(this.query);
                            }
                        });
                    } else {
                        this.query.mobile = "";
                        this.query.idCard = "";
                    }
                    done(this.isClose);
                } else {
                    done();
                }
            },
        },
        created() {
            this.getInfo();
        },
        mounted() {},
    };
</script>

<style scoped lang="less">
    .van-cell__title span,
    .van-cell__value span {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #4d6181;
    }
    .van-cell__value span {
        color: #283f65;
    }
    .lastCell {
        margin-top: 8px;
    }
</style>